<template>
  <el-container direction="vertical">
    <div class="swiper-container" style="padding: 10px">
      <el-carousel :interval="4000" type="card" height="300px">
        <!-- <el-carousel-item v-for="item in imgList" :key="item.index">
          <img :src="item.url" style="width: 100%;height: 100%">
        </el-carousel-item> -->
        <el-carousel-item>
          <img src="@/assets/swiper/1.jpeg" class="swiper-img">
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/swiper/2.jpeg" class="swiper-img">
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/swiper/3.jpeg" class="swiper-img">
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/swiper/4.jpeg" class="swiper-img">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="card-contianer" style="padding: 0 10px">
      <el-row :gutter="20">
        <el-col :span="24" style="display: flex;justify-content: center;">
          <el-card class="box-card" shadow="hover" style="width: 700px">
            <div slot="header" class="clearfix" style="text-align: center;">
              <h3>公告栏</h3>
              <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <div v-for="item in noticeList" :key="item.index" class="text item" style="padding: 5px 0">
              <a href="javasript:;" @click="showNotice(item.id)">{{ item.title }}</a><span style="float:right;">{{ item.pushTime }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <ShowNotice :show-notice-visible="showNoticeVisible" :choose-id="chooseId" @closeShowNotice="closeShowNotice" />
  </el-container>
</template>

<script>
import { getImgList, getNotice } from '@/api/home'
import { parseTime } from '@/utils/index'
import ShowNotice from '@/components/ShowNotice'
export default {
  name: 'Home',
  components: { ShowNotice },
  data() {
    return {
      imgList: [],
      noticeList: [],
      chooseId: '',
      showNoticeVisible: false
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      getImgList().then(res => {
        if (res) {
          this.imgList = res.data.data
        }
      })
      getNotice().then(res => {
        if (res) {
          const list = res.data.list
          list.forEach(element => {
            element.pushTime = parseTime(element.pushTime, '{y}-{m}-{d}')
          })
          this.noticeList = list
        }
      })
    },
    showNotice(id) {
      this.chooseId = id
      this.showNoticeVisible = true
    },
    closeShowNotice() {
      this.showNoticeVisible = false
      this.chooseId = ''
    }
  }
}
</script>

<style lang="scss" scoped>
a:hover{
  color: blue;
  text-decoration: underline;
}
.swiper-img{
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
</style>
